<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- basic -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- mobile metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
    <!-- site metas -->
    <title>轻态公寓·老年港湾</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- site icons -->
    <link rel="icon" href="images/fevicon/fevicon.png" type="image/gif" />
    <!-- Owl Stylesheets -->
    <link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css" />
    <!-- nice select css -->
    <link rel="stylesheet" type="text/css" href="css/nice-select.min.css" />
    <!-- bootstrap css -->
    <link
      rel="stylesheet"
      href="https://www.jq22.com/jquery/bootstrap-4.2.1.css"
    />
    <!-- Site css -->
    <link rel="stylesheet" href="css/style.css" />
    <!-- responsive css -->
    <link rel="stylesheet" href="css/responsive.css" />
    <!-- custom css -->
    <link rel="stylesheet" href="css/custom.css" />
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body id="default_theme" class="contact_page sub_page">
    <!-- loader -->
    <div class="bg_load">
      <img class="loader_animation" src="images/loader.svg" alt="#" />
    </div>
    <!-- end loader -->
    <!-- hero area starts -->
    <div class="hero_area">
      <!-- header section starts -->
      <header class="header_section">
        <!-- navbar starts -->
        <nav class="navbar navbar-expand-lg header_navbar">
          <a class="navbar-brand" href="index.html">
            <img src="images/logo.png" alt="" />
            <span> 轻态公寓·老年港湾 </span>
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class=""> </span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto align-items-center">
              <li class="nav-item">
                <a class="nav-link" href="index.html"
                  >首页 <span class="sr-only">(current)</span></a
                >
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="about.html">关于轻态 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="property.html"> 找房 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="order_list.html"> 我的订单 </a>
              </li>

              <li class="nav-item active">
                <a class="nav-link" href="contact.html"> 联系我们 </a>
              </li>
            </ul>
            <div class="user_option">
              <a href="user_info.html" class="user_login_link">
                <svg
                  data-name="Layer 1"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 518.95 441.44"
                >
                  <defs>
                    <style>
                      .cls-1 {
                        isolation: isolate;
                      }
                    </style>
                  </defs>
                  <title>user-icon</title>
                  <g class="">
                    <path
                      class=""
                      d="M631.75,452.8A132.22,132.22,0,0,1,659,495.72H140.05q9.84-24.53,30.1-45.27,21.27-21.69,52.41-37.73,89.78-47.16,181.63-45.51T585.83,417.9Q613.32,433,631.75,452.8ZM322.2,73.15q-34.77,17.92-55,49.75A127.59,127.59,0,0,0,247,192.7a126.32,126.32,0,0,0,20.76,70,146.22,146.22,0,0,0,55.53,50.46q35.28,18.87,77.06,18.63t77.07-19.57q34.75-18.86,54.49-50,20.75-32.55,20.75-70.27t-21.27-69.8q-20.25-31.12-54.49-49a163.52,163.52,0,0,0-77.33-18.87Q357.49,54.28,322.2,73.15Z"
                      transform="translate(-140.05 -54.28)"
                    />
                  </g>
                </svg>
              </a>
            </div>
          </div>
        </nav>
        <!-- navbar ends -->
      </header>
      <!-- header section ends -->
    </div>
    <!-- hero area ends -->

    <!-- page info starts -->

    <div class="page_info layout_padding pr_mobile_20">
      <div class="section_bg section_bg_left"></div>
      <div class="container">
        <div class="page_box">
          <h2 class="page_name">联系我们</h2>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="index.html">首页</a></li>
              <li class="breadcrumb-item active" aria-current="page">
                联系我们
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </div>

    <!-- page info ends -->

    <!-- contact section starts-->

    <div id="app">
      <section
        class="contact_section layout_padding layout_margin pl_mobile_20"
      >
        <div class="section_bg section_bg_right"></div>
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-5 offset-md-1">
              <div class="form_container mb_md_75">
                <div class="heading_container">
                  <h2>编写你的留言</h2>
                </div>
                <form>
                  <div>
                    <input
                      v-model="form.content"
                      type="texterea"
                      placeholder="请输入你的留言"
                    />
                  </div>
                  <div class="btn-box">
                    <button type="button" @click="onSubmit">
                      <span> 提交 </span>
                    </button>
                  </div>
                </form>
              </div>
            </div>
            <div class="col-md-6 px-0">
              <div class="map_container">
                <div class="map">
                  <div id="googleMap"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section
        class="contact_section layout_padding layout_margin pl_mobile_20"
      >
        <div class="section_bg section_bg_left"></div>
        <div class="list-group container-fluid" style="width: 80%">
          <div
            class="list-group-item list-group-item-action"
            v-for="item in list"
          >
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">{{item.content}}</h5>
              <small>{{item.createTime}}</small>
            </div>
            <p class="mb-1">回复：{{item.reply||'暂未回复'}}</p>
            <small>{{item.updateTime}}</small>
          </div>
        </div>
      </section>
    </div>

    <!-- contact section ends -->

    <!-- footer section -->
    <footer class="footer_section">
      <p>轻态公寓 | 轻态港湾 | 轻态社区</p>
      <p>Copyright © 2024 轻态 ICP证浙B2-20160559</p>
    </footer>
    <!-- end  footer section -->

    <!-- js section -->
    <!-- jQuery -->
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <!-- bootstrap js -->
    <script src="js/bootstrap.min.js"></script>
    <!-- owl slider -->
    <script src="js/owl.carousel.min.js"></script>
    <!-- nice select -->
    <script src="js/jquery.nice-select.min.js"></script>
    <!-- custom js -->
    <script src="js/custom.js"></script>
    <script src="js/vue@2.6.14.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          list: [],
          form: {
            content: "",
          },
        },
        mounted() {},
        created() {
          const token = window.localStorage.getItem("APFTE_TOKEN");
          if (!token) {
            this.$confirm("你暂未登录，是否前去登录?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              window.location.href = "./login.html";
            });
            return;
          }
          this.getList();
        },
        methods: {
          getUrlParam(name) {
            const searchParams = new URLSearchParams(window.location.search);

            // 获取所有参数为对象形式
            const allParams = Object.fromEntries(searchParams.entries());

            return allParams;
          },
          getList() {
            const token = window.localStorage.getItem("APFTE_TOKEN");
            axios({
              headers: {
                Authorization: "Bearer " + token,
              },
              method: "get",
              url: "http://localhost:8080/api/messageBoard/app/list",
            }).then((response) => {
              if (response.data.code === 200) {
                this.list = response.data.data.list;
              } else if (response.data.code === 401) {
                this.$confirm("你登录已过期，是否前去登录?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }).then(() => {
                  window.location.href = "./login.html";
                });
              }
            });
          },
          onSubmit() {
            const token = window.localStorage.getItem("APFTE_TOKEN");
            if (!token) {
              this.$confirm("你暂未登录，是否前去登录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }).then(() => {
                window.location.href = "./login.html";
              });
              return;
            }
            const { content } = this.form;
            if (!content) {
              return this.$message.warning("请填写你的留言");
            }
            axios({
              headers: {
                Authorization: "Bearer " + token,
              },
              method: "post",
              data: {
                content,
              },
              url: "http://localhost:8080/api/messageBoard/app/add",
            }).then((response) => {
              if (response.data.code === 200) {
                this.$message.success("提交成功，请等待回复");
                this.form.content = "";
                this.getList();
              } else if (response.data.code === 401) {
                this.$confirm("你登录已过期，是否前去登录?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }).then(() => {
                  window.location.href = "./login.html";
                });
              } else {
                this.$message.error(response.data.msg);
              }
            });
          },
        },
      });
    </script>
  </body>
</html>
